You can target the first letter of only the first paragraph using the :first-child pseudo-class in combination with the ::first-letter pseudo-element. This allows you to apply special styles to the initial letter of the first paragraph without affecting other paragraphs.

Key Points

1
:first-child selects the first element among its siblings.
2
::first-letter targets only the first letter of an element.
3
Combining them lets you style the first letter of the first paragraph specifically.

Example: Style First Letter of First Paragraph

In this example, only the first letter of the first paragraph is enlarged and colored blue. Subsequent paragraphs remain unaffected.

Best Practices

1
Use ::first-letter for decorative purposes or to emphasize the start of content.
2
Combine with :first-child to avoid styling multiple paragraphs unintentionally.
3
Ensure that styling does not compromise readability.
4
Test on different screen sizes for consistent appearance.

Difficulty: 3/10

Topics: first-letter pseudo-class, CSS specificity, selector scoping

Scenario Questions

0-2 years experience

1
How would you style the first letter of only the first paragraph on a landing page so it’s larger and bold, without affecting any other paragraphs?
2
What happens if you apply ::first-letter to a div that contains multiple paragraphs — will it style the first letter of every paragraph or just the first one?
3
You wrote a rule for ::first-letter but it’s not working — the paragraph has a span wrapping the first letter. Why might that be?

2-5 years experience

1
A designer wants the first letter of the first paragraph in a blog post to be a drop cap, but the CMS sometimes injects a hidden comment before the paragraph — how would you debug and fix this?
2
We’re using a CSS framework that resets all ::first-letter styles, and now our drop caps are broken. How would you override this without breaking other components?
3
The first paragraph in our article component sometimes starts with a quote mark or emoji — how do you ensure ::first-letter still works correctly in those edge cases?

5-8 years experience

1
You’re building a scalable typography system for a global content platform — how would you design a reusable drop cap component that handles RTL languages, mixed scripts, and dynamic content without performance hits?
2
In a large-scale CMS, editors can insert arbitrary HTML into article bodies. How do you ensure ::first-letter styling is robust against malformed markup, nested elements, or dynamically injected content without causing layout shifts?
3
How would you implement a drop cap that degrades gracefully on low-end devices or when CSS is disabled, while still maintaining semantic HTML and accessibility?

8+ years experience

1
We’re migrating a legacy content platform where drop caps were implemented with JS and inline styles — how would you architect a CSS-first solution that ensures backward compatibility, avoids layout thrashing, and supports future theming across 50+ product surfaces?
2
How would you coordinate with editorial, design, and accessibility teams to standardize drop cap behavior across global markets, considering typographic conventions in Arabic, Chinese, and Devanagari scripts — and how do you measure success?
3
Your team owns the core typography system used by 20+ products. How do you design the API and documentation for ::first-letter-based drop caps to prevent misuse, ensure performance, and allow for future extensibility without breaking existing implementations?

Follow-up Questions

❓What happens if the first paragraph has an inline element like a span before the first letter?
❓How would you handle this if the paragraph is dynamically generated and might not always be the first child?
❓Could this break if the user has custom user-agent styles or a CSS reset applied?